<template>
	<div id="topic">
		<!-- 专题管理 -->
		<el-row class="role-head">
			<el-input placeholder="请输入专题标题" v-model="mtitle"></el-input>
			<el-input placeholder="请输入专题子标题" v-model="childrenTitle"></el-input>
			<el-select v-model="value">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" @click="searchUser">查询</el-button>
			<el-button type="primary" icon="el-icon-bottom" @click="downLoadExsl">导出</el-button>
		</el-row>
		<el-row class="notice-add">
			<el-button type="primary" icon="el-icon-edit" @click="addUser">添加</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="delmorehUser">批量删除</el-button>
		</el-row>

		<!-- 专题表格-->
		<template>
			<el-table :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign:'center'}"
				style="width: 100%">
				<el-table-column type="selection">
				</el-table-column>
				<el-table-column prop="title" label="专题标题">
				</el-table-column>
				<el-table-column prop="subtitle" label="专题子标题">
				</el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<!-- <img :src="scope.row.url" class="avator2" /> -->
						<el-popover placement="right" trigger="hover">
							<img :src="scope.row.picUrl" style="max-width: 100px;max-height: 100px" />
							<img slot="reference" :src="scope.row.picUrl" class="avator2">
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="专题详情">
					<template slot-scope="slot">
						<el-button type="primary" @click="readNotice(slot.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="底价">
				</el-table-column>
				<el-table-column prop="readCount" label="阅读数量">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<template>
			<!-- 查看通知 -->
			<el-dialog title="专题详情" :visible.sync="dialogVisible" width="55%" id="dg">
				<div v-html="noticeContent">

				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</template>
			
			<!-- 分页操作 -->
			<template>
				<div class="block2">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</template>

	</div>


</template>

<script>
	import {
		topicManage,
		delTopic,
		delmoreTopic,
	
		
	} from '../../https/promotion'
	export default {
		data() {
			return {
				// 专题标题
				mtitle: '',
				//专题子标题
				childrenTitle: '',
				//下拉选择的数据
				options: [{
					value: "addTime",
					label: '按时间排序'
				}, {
					value: "id",
					label: '按序号排序'
				}, {
					value: "price",
					label: '按价格排序'
				}],
				// 选择的数据
				value: "addTime",
				// 表格的数据
				tableData: [],
				// 多选框的数据
				multipleSelection: [],
				// 查看的弹框是否进行展示
				dialogVisible: false,
				// 查看的弹框中需要渲染的数据
				noticeContent: '',
				// 当前页面
				page: 1,
				// 显示条数
				limit: 10,
				// 总条数
				total: 0,
				// 按照什么字段进行排序
				sorts:''



			}
		},
		methods: {
			// 方法
			searchUser() {
				// 查询的操作
				this.sorts=this.value
				this.allTopic()
				
			},
			downLoadExsl() {
				// 导出操作
				// 导出
				this.$confirm("此操作将导出列表excel文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.excelData = this.tableData; //你要导出的数据list。
						if (this.tableData.length != 0) {
							this.export2Excel();
						} else {
							this.$message({
								showClose: true,
								message: '列表数据为空',
								type: 'warning'
							});
							return false
						}
					})
					.catch(() => {});
				
			},
			
			export2Excel() {
				var that = this;
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require("../../excel/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径
					const tHeader = [
						// 这个是导出excel里面的表头
						"专题ID",
						"专题标题",
						"专题子标题",
						"专题内容",
						"专题图片",
						"商品低价",
						"阅读量",
						"专题商品",
					]; // 导出的表头名
					const filterVal = [
						// 这个是你表格数据的字段
						"id",
						"title",
						"subtitle",
						"content",
						"picUrl",
						"price",
						"readCount",
						"goods",			
					]; // 导出的表头字段名
					const list = that.excelData;
					// that.excelData为传入的数据
					const data = that.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, `专题管理`); // 导出的表格名称，根据需要自己命名
					// tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			},
			
			addUser() {
				// 添加操作
				this.$router.push({
					path:'/promotion/topic-create'
				})
			},
			delmorehUser() {
				// 批量删除
				if(this.multipleSelection.length==0){
					this.$message({
						type:'error',
						message:'至少选择一条数据'
					})
				}else{
					// 调用批量删除的接口
					let params={
						ids:this.multipleSelection
					}
					delmoreTopic(params).then(res=>{
						console.log("批量删除",res)
						if(res.data.errmsg=='成功'){
							this.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success'
							});
						}
						
					}).catch(err=>{
						
					})
				}
				
				
			},
			
			handleEdit(index, row) {
				// 编辑操作
				console.log("编辑", row)
				this.$router.push({
					path:'/promotion/topic-edit',
					query:{
						id:row.id
					}
				})
				// 这里进行数据的传输
				// 将数据传递到临时存，记住要转换成字符串才能搞定
				let editdata=JSON.stringify(row)
				sessionStorage.setItem("editData",editdata)
				
				
				
				
			},
			handleDelete(index, row) {
				// 删除操作
				console.log("删除", row)
				// 这里进行删除单条？
				this.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params={
						id:row.id
					}
					delTopic(params).then(res=>{
						console.log("删除",res)
						if(res.data.errmsg=='成功'){
							this.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success'
							});
							
							
						}else{
							this.$notify({
								title: '失败',
								message: '删除失败',
								type: 'error'
							});
						}
					// 重新调用渲染数据
					this.allTopic()
					}).catch(err=>{
						
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			readNotice(row) {
				// 查看通知操作
				this.dialogVisible = true
				this.noticeContent = row.content


			},
			allTopic() {
				// 所有的主题
				let params = {
					page: this.page,
					limit: this.limit,
					title: this.mtitle,
					subtitle: this.childrenTitle,
					sort:this.sorts
				}
				topicManage(params).then(res => {
					this.tableData = res.data.data.list
					this.total = res.data.data.total
					console.log("结果", res)

				}).catch(err => {

				})
			},
			// 分页功能
			handleSizeChange(val) {
				// 分页改变显示数据
				// console.log(`每页 ${val} 条`);
				this.limit = val
				this.allTopic()
			},
			handleCurrentChange(val) {
				// 当前页码的数据
				// console.log(`当前页: ${val}`);
				this.page = val
				this.allTopic()
			},
		},
		mounted() {
			this.allTopic()
		}
	}
</script>

<style>
	.role-head {
		margin-bottom: 15px;
		min-width: 500px;
		overflow: hidden;
	}

	.role-head .el-input {
		width: 150px !important;
		margin-right: 10px;
	}

	.notice-add {
		/* 让其弹性盒子 */
		display: flex;
		justify-content: end;
		margin-bottom: 10px;
	}

	.avator2 {
		/* 头像的处理 */
		width: 40px;
		height: 40px;
	}
	.block2 {
		margin-top: 20px;
	}
</style>
